.contactDetails-container {
    position: relative;
    display: flex;
    flex-direction: column;
}


.contactDetails-details {
    overflow: auto;
}

.contactDetails-details > * { flex: 1 }

.contactDetails-header { padding: 0 1em }

.contactDetails-fields-container {
    position: relative;
    margin-bottom: 20px;
    padding: 15px 15px 15px;
    border: 1px solid rgba($border, .3);
    border-radius: 3px;
}

.contactDetails-fields-ico {
    display: block;
    width: 1.4rem;
    position: absolute;
    z-index: 4;
    top: -10px;
    left: calc(50% - .7rem);
    font-size: 1rem;
    text-align: center;
    color: lighten($secondary, 20);
    border: medium none;
    background: #fff none repeat scroll 0 0;
}

.contactDetails-fields-locked {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: rgba($white, .7);
}

.contactDetails-fields-locked ~ * { pointer-events: none }

.contactDetails-fields-locked-notice {
    background: $white;
    text-align: center;
    padding: 20px 30px;
    border: 1px solid $border;
    border-radius: $border-radius;
}

.contactDetails-fields-locked-notice p {
    text-align: center;
}

.contactDetails-fields-ico > svg {
    display: block;
    height: 17px;
    width: 17px;
    margin-left: 3px;

    fill: $primary;
    // darken the checkmark for more contrast
    color: darken($primary, 10);
}

/* Context */

.contactDetails-container .contactDetails-details { padding-top: 20px }

.contactDetails-container .as-sortable-dragging {
    border-radius: $border-radius;
    overflow: hidden;
}

.contactDetails-container .as-sortable-dragging .contactItem-sortable-wrapper {
    padding: 0;
    margin: 0px;
    border:hidden;
    border: none;
 }



.appConfigBody-is-tablet {
    .contactDetails-details { flex-direction: row }
}

@media (max-width: 850px) {
    .appConfigBody-is-tablet .contactDetails-details { flex-direction: column }
    .appConfigBody-is-tablet .contactDetails-details .contactDetails-clear { margin-right: 0px; }
}

.appConfigBody-is-mobile .contactDetails-fields-locked {
    align-items: flex-start;
    padding-top: 65px;
}


/* validation */
.contactDetails-container  [ng-messages] { display: none }

/* touched inputs */

.contactDetails-container.ng-invalid [ng-messages] { display: flex }

/* inputs colors */

.contactDetails-container.ng-submitted .ng-invalid:not(:focus),
.contactDetails-container .ng-touched.ng-invalid:not(:focus),
.contactDetails-container .ng-submitted .ng-invalid:not(:focus) {
    border-color: $red;
    box-shadow: inset 0 1px 2px rgba($red, .3), 0 0 0 0.2em rgba($red, .3);
}


.contactDetails-container:not(.contactDetails-encrypted-and-signed) {
    // Hide the check icon if it's not encrypted and signed.
    .contactEncrypted-signed-icon {
        display: none;
    }
}

/* verification error display */

.contactDetails-container:not([class*="contactErrorType-"]) .contactError-container,
.contactDetails-container[class*="contactErrorType-"] .contactClear-container .contactError-item-encrypted,
.contactDetails-container[class*="contactErrorType-"] .contactEncrypted-container .contactError-item-verification {
     display: none;
}


.contactDetails-encrypted-verification-error .fa-certificate,
.contactDetails-encrypted-error .fa-lock  {
    color: $exp;
}
.contactDetails-container[class*="contactErrorType-"] {
    .contactDetails-fields-container {
        border-color: $exp;
    }
}
.contactDetails-verification-error .contactClear-container .contactDetails-fields-container,
.contactDetails-encrypted-verification-error .contactEncrypted-container .contactDetails-fields-container,
.contactDetails-encrypted-error .contactEncrypted-container .contactDetails-fields-container {
    border-color: $exp;
}

.contactEncrypted-container:not(.contactDetails-show-custom-fields) .contactDetails-custom-fields { display: none }

.contactDetails-toggle-custom-fields {
    display: none; // Hide the access to the custom field section
    background: transparent;
    border: 0;
    text-decoration: underline;
    color: $primary;
}

// Only show the first FN
// https://github.com/ProtonMail/Angular/issues/6522
// TODO: need to discuss what to do with these because multiple FNs are actually stored on the vCard, but only 1 is displayed
.contactItem-container-Name .contactItem-row:not(:first-child) { display: none }

